<template>
    <van-row>
  <van-col span="基本信息" class="span1">基本信息</van-col>
</van-row>
<img srcset="@/assets/tou.jpg" class="im"/>
 <van-row>
  <van-col span="头像" class="span2">头像</van-col>
</van-row>
<van-row>
  <van-col span="用户信息" class="span3">用户信息</van-col>
</van-row>
<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="username1"
       class="inp"
      name="呢称"
      label="呢称"
      placeholder="请输入您的呢称"
      :rules="[{ required: true, message: '请输入您的呢称' }]"
    />
    <van-field
      v-model="username2"
       class="inp"
      name="手机号码"
      label="手机号码"
      placeholder="请输入您的手机号码"
      :rules="[{ required: true, message: '请输入您的手机号码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <div class="mm">
 <van-button round block type="primary" native-type="submit" class="button1">
     下一步(1/2)
    </van-button>
    <van-button round block type="primary" native-type="submit" class="button2">
     跳过
    </van-button>
    </div>
  </div>
</van-form>
</template>
<script setup lang="ts">
import router from '@/router';
import {ref} from 'vue'
     const username1 = ref('');
     const username2 = ref('');
 const onSubmit = (values: any) => {
      console.log('submit', values);
      router.push('address')
    };
   
   
   
</script>
<style scoped>
 .span1{
    width: 100%;
    height: 50px;
    background-color:#c1ab96 ;
    color: white;
    font-size: 24px;
    line-height: 50px;
    text-indent: 5%;
 }
 .im{
    width: 30%;
    height: 5%;
    margin: 5% 35%;
 }
 .span2{
    text-indent: 100px;
    color: #d3b3b1;
 }
 .span3{
    color:  #d3b3b1;
    margin-left: 5%;
 }
 .inp{
    border-bottom: 1px solid burlywood;
    margin-left: 5%;
 }
 .mm{
    width: 70%;
    margin-top: 40%;
    margin-left: 15%;
 }
.van-button{
    width: 100%;
    height: 20%;
    margin-top: 5%;
   
}
.button1{
    background-color: #c1ab96;
}
.button2{
    background-color: white;
    color: black;
}
</style>